Skip to content

fix(ui): make the auto-hidden topbar reachable without a mouse - #160

Merged
justraman merged 7 commits into
mainfrom
rs/fix-92
Aug 21, 2026
Merged

fix(ui): make the auto-hidden topbar reachable without a mouse#160
justraman merged 7 commits into
mainfrom
rs/fix-92

Conversation

@justraman

@justraman justraman commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Description

Fixes: #91
Once a verified desktop session logged in, the topbar slid away after 5s and the
only way back was hovering a 6px invisible strip at the top of the viewport.
Keyboard-only users lost home, settings, permissions and login for the rest of
the session, with no route back.
Two smaller problems in the same code path:

Changes

Auto-hide moves out of main.ts into packages/ui/src/topbar-autohide.ts, where
it can be unit tested. main.ts keeps only the auth/shield wiring
(armTopbarAutoHide on login, pinTopbarVisible on logout).

Keyboard access:

  • Document-level focusin reveals the bar when focus lands in #topbar or any
    surface it owns (user, settings, permissions popovers, pairing modal). The
    hidden bar keeps its tab stops on purpose, so tabbing into it is the reveal.
  • Alt+Shift+T toggles the bar. Revealing moves focus to the first control,
    hiding hands focus back to the app frame so it never parks off-screen.
    Advertised via aria-keyshortcuts while armed. Matched on event.code
    (with a key fallback) because macOS turns Option+Shift+T into a dead key.
  • An open popover or modal, or focus inside the bar, defers the hide instead of
    pulling the controls away mid-interaction.
  • #topbar gains role="banner" so it is reachable by landmark navigation.

@github-actions

Copy link
Copy Markdown
Contributor

⚡ Performance Report

⚠️ No baseline found on main. This PR's results are recorded but cannot be compared.
Merge to main to establish a baseline.

@github-actions

github-actions Bot commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Bundle Size Report

Chunks over 500 KB:

File Raw Brotli Gzip
host/assets/paseo.smol-DboPaEh1.json 1.84 MB 941.7 KB 1019.4 KB
host/assets/paseo-people-next.smol.json 3.36 MB 1.68 MB 1.82 MB
host/assets/previewnet.smol.json 547.1 KB 92.2 KB 101.2 KB
host/assets/smoldot.js 3.05 MB 2.27 MB (+343 B) 2.28 MB
host/assets/smoldot_worker.js 3.02 MB 2.26 MB 2.27 MB
host/assets/wasm/web/truapi_server_bg.wasm 7.06 MB 5.25 MB 5.52 MB
Total 19.88 MB (+9.4 KB) 12.80 MB (+2.8 KB) (-36%) 13.35 MB (+2.7 KB)
All files
File Raw Brotli Gzip
host/.well-known/apple-app-site-association 1.0 KB 1.0 KB 1.0 KB
host/.well-known/assetlinks.json 2.1 KB 343 B 427 B
host/assets/bridge.js 69.4 KB 19.0 KB (+13 B) 21.9 KB (+6 B)
host/assets/browser.js 22.9 KB 7.6 KB (+3 B) 8.6 KB (-1 B)
host/assets/client.js 100.1 KB 29.4 KB (-114 B) 32.4 KB
host/assets/dist.js 39.0 KB 12.9 KB (-6 B) 14.6 KB
host/assets/dotli-debug-bus.js 710 B 710 B 710 B
host/assets/get-sync-provider.js 2.8 KB 1.1 KB (+2 B) 1.2 KB (+1 B)
host/assets/hex.js 154 B 154 B 154 B
host/assets/index.css 48.3 KB (+326 B) 7.6 KB (+59 B) 8.5 KB (+54 B)
host/assets/index.js 204.7 KB (+2.5 KB) 51.5 KB (+765 B) 61.4 KB (+837 B)
host/assets/manifest.js 22.6 KB 7.3 KB (+25 B) 8.0 KB
host/assets/panel.js 76.2 KB 20.6 KB (-9 B) 23.2 KB (+1 B)
host/assets/paseo.smol-DboPaEh1.json 1.84 MB 941.7 KB 1019.4 KB
host/assets/paseo-people-next.smol.json 3.36 MB 1.68 MB 1.82 MB
host/assets/paseo.smol.json 23.4 KB 5.4 KB 6.2 KB
host/assets/previewnet.smol.json 547.1 KB 92.2 KB 101.2 KB
host/assets/resolve.js 156 B 156 B 156 B
host/assets/rpc-resolve.js 2.5 KB 1.0 KB (-12 B) 1.2 KB (-1 B)
host/assets/smoldot.js 3.05 MB 2.27 MB (+343 B) 2.28 MB
host/assets/smoldot_worker.js 3.02 MB 2.26 MB 2.27 MB
host/assets/spans.js 2.6 KB 1.1 KB 1.3 KB
host/assets/src.js 1.8 KB 856 B (+2 B) 945 B (-1 B)
host/assets/styles.css 15.3 KB 3.3 KB 3.8 KB
host/assets/wasm/web/README.md 11.9 KB 11.9 KB 11.9 KB
host/assets/wasm/web/package.json 371 B 371 B 371 B
host/assets/wasm/web/truapi_server.d.ts 8.1 KB 8.1 KB 8.1 KB
host/assets/wasm/web/truapi_server.js 38.2 KB 6.6 KB 7.6 KB
host/assets/wasm/web/truapi_server_bg.wasm 7.06 MB 5.25 MB 5.52 MB
host/assets/wasm/web/truapi_server_bg.wasm.d.ts 3.0 KB 3.0 KB 3.0 KB
host/assets/web.js 13.3 KB 3.6 KB 4.0 KB (+2 B)
host/assets/worker-runtime.js 6.4 KB (+6.3 KB) 1.7 KB (+1.5 KB) 1.8 KB (+1.7 KB)
host/assets/worker-runtime.js 106 B 106 B 106 B
host/assets/ws.js 23.1 KB 7.5 KB (+9 B) 8.2 KB (+2 B)
host/dotli.png 11.5 KB 11.5 KB 11.5 KB
host/favicon.svg 1.8 KB 1.8 KB 1.8 KB
host/host-sw.js 2.7 KB 1.1 KB (+13 B) 1.2 KB (+4 B)
host/icon-192.png 12.5 KB 12.5 KB 12.5 KB
host/icon-512.png 42.8 KB 42.8 KB 42.8 KB
host/index.html 24.4 KB (+46 B) 4.8 KB (+28 B) 5.8 KB (+18 B)
host/manifest.webmanifest 441 B 441 B 441 B
host/workbox.js 14.8 KB 4.6 KB 5.1 KB
sandbox/app-sw.js 9.7 KB 3.2 KB (-4 B) 3.6 KB
sandbox/assets/bitswap-bridge.js 840 B 840 B 840 B
sandbox/assets/fetch.js 3.4 KB 1.2 KB 1.4 KB
sandbox/assets/index.js 120.4 KB 34.3 KB (+69 B) 40.4 KB
sandbox/assets/index.css 48.3 KB (+326 B) 7.6 KB (+59 B) 8.5 KB (+54 B)
sandbox/favicon.svg 1.8 KB 1.8 KB 1.8 KB
sandbox/index.html 1.7 KB 578 B (-1 B) 785 B
Total 19.88 MB (+9.4 KB) 12.80 MB (+2.8 KB) (-36%) 13.35 MB (+2.7 KB)

Commit: dd746ce

@github-actions

Copy link
Copy Markdown
Contributor

⚠️ E2E Product suite skipped — Nova signing bot is unavailable.

This is a Nova-side outage and not a dot.li test failure. Re-run
from the Actions tab once the bot recovers.

Logs: https://github.com/paritytech/dotli-community/actions/runs/31593345203

@github-actions

github-actions Bot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

E2E Product suite failed on a32c4426f957c797b0b375edf40df472ea94b702 — 37 passed, 8 failed, 17 skipped.

Failed tests:

  • Get Product Account
  • Product Signer
  • Product Account Alias
  • Bulletin Allowance
  • All Allowances
  • As a product user, I can navigate within the current product
  • Query Balance
  • Sign Raw Message

Logs: https://github.com/paritytech/dotli-community/actions/runs/32368693853
Artifacts: e2e-product-results (uploaded above) — open the failed test's trace.zip with npx playwright show-trace.

@justraman
justraman marked this pull request as draft August 14, 2026 07:07
# Conflicts:
#	apps/host/src/main.ts
#	packages/ui/src/styles/topbar.css
@justraman
justraman marked this pull request as ready for review August 20, 2026 12:24

@BigTava BigTava left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@justraman
justraman merged commit 0465ebc into main Aug 21, 2026
13 of 15 checks passed
@justraman
justraman deleted the rs/fix-92 branch August 21, 2026 12:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make the auto-hidden topbar recoverable by keyboard

2 participants